<template>
	<view class="container special-container">
		<view class="pagetop" :style="{background:`url(${bgimg})`,backgroundRepat:'no-repeat',backgroundSize:'100% 100%'}" @tap.self="changeBgimage()"></view>
		<u-navbar title="" back-icon-color="#fff" :border-bottom="false" :background="{background:'transparent'}" :is-fixed="false"></u-navbar>
		<view class="userinfo">
			<view class="userimg">
				<u-avatar :src="useravatar" size="150"></u-avatar>
				<view class="eidtinfo" @tap="navigateTomyinfo()">
					<u-icon name="/static/icon_bj_126.png" size="28"></u-icon>
					<text>编辑</text>
				</view>
			</view>
			<view class="username">
				<text>{{username}}</text>
			</view>
			<view class="userfriends">
				<view class="usergz">
					<text>{{usergznum>999?'999+':usergznum}} 关注</text>
				</view>
				<view class="userfs">
					<text>{{userfsnum>999?'999+':userfsnum}} 粉丝</text>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="trendscollect">
			<u-tabs-swiper ref="listtab" active-color="#FF9E5D" :bold="false" :list="listtabs" inactive-color="#888888" @change="tabsChange"></u-tabs-swiper>
			<swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish" :style="{height:trendslistHeight+'px'}">
				<swiper-item v-for="(item,index) in listtabs" :key="index">
					<view class="trendslist">
						<view class="ringtrends" :class="{'lasttrends':trendsindex==trendstexts.length-1}"v-for="(trendsitem,trendsindex) in trendstexts" :key="">
							<view class="publisher">
								<view class="publisher-left">
									<u-avatar src="../../../static/avatar.jpg" sex-icon="man"></u-avatar>
									<text>李海</text>
								</view>
								<u-icon name="more-dot-fill" size="35" v-on:click="openCloseDeltrendbtn(trendsindex)"></u-icon>
							</view>
							<view class="deltrend" v-show="showDeltrendbtn[trendsindex]" v-on:click="openDeletemodal()">
								<view class="deltrend-qipao">
									<text>删除</text>
								</view>
							</view>
							<view class="trendstext">
								<text>{{showtrendsText(trendsindex)}}</text>
								<text class="showall" v-on:click="showAlltexts(trendsindex)" v-if="!isShowall[trendsindex]">展开</text>
							</view>
							<view class="trendsimages" :class="{'oneimg':trendsitem.images.length==1,'twoimg':trendsitem.images.length==2,'moreimg':trendsitem.images.length>2}">
								<image :src="trendsimage" mode="" v-for="(trendsimage,imagesindex) in trendsitem.images" v-on:click="previewImages(trendsindex,imagesindex)"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn">
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>87</text>
								</view>
								<view class="btnitem">
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>87</text>
								</view>
								<view class="btnitem" v-on:click="openTrendscommitsList()">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>125</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(trendsindex)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-modal v-model="showDeleteModal" content="确定要删除吗？" title="温馨提示" :show-cancel-button="true" cancel-color="#888" confirm-color="#FE4542" @confirm="deleteTrends()"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgimg:'/static/1.jpeg',
				useravatar:'',
				username:'',
				usergznum:280,
				userfsnum:250,
				listtabs:[{
					name:'动态'
				},{
					name:'收藏'
				}],
				tabcurrent:0,
				//模拟数据 动态文本
				trendstexts:[
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/timg2.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/timg2.jpg','/static/timg2.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['/static/timg2.jpg','/static/timg2.jpg','/static/timg2.jpg']
					}
				],
				isShowall:[false,false,false],
				showTrendscommitsList:false,
				trendslistHeight:0,
				showDeltrendbtn:[false,false,false],
				showDeleteModal:false
			}
		},
		created() {
			this.useravatar=uni.getStorageSync('userInfo').headOrtrait;
			this.username=uni.getStorageSync('userInfo').name;
		},
		onReachBottom() {
			
		},
		onLoad() {
			
		},
		onReady() {
			this.getTrendsListheight()
		},
		methods: {
			tabsChange(e){
				console.log(e)
				this.tabcurrent = e
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.listtab.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.listtab.setFinishCurrent(current);
				this.tabcurrent = current;
			},
			//展开动态文本
			showAlltexts(index){
			      this.$set(this.isShowall,index,true);
			},
			//预览图片
			previewImages(trendsindex,imagesindex){
				const that=this;
				uni.previewImage({
					current:imagesindex,
					urls:that.trendstexts[trendsindex].images,
					indicator:"default"
				})
			},
			//打开动态评论列表弹出层
			openTrendscommitsList(){
				this.showTrendscommitsList=true;
			},
			getTrendsListheight(){
				this.$u.getRect('.trendslist').then(res => {
					this.trendslistHeight=res.height;
			    })
			},
			openCloseDeltrendbtn(trendindex){
				this.$set(this.showDeltrendbtn,trendindex,!this.showDeltrendbtn[trendindex]);
			},
			openDeletemodal(){
				this.showDeleteModal=true;
			},
			deleteTrends(){
				console.log('确认删除');
			},
			changeBgimage(){
				uni.chooseImage({
					count:1,
					complete: (res) => {
						console.log(res);
					}
				});
			},
			navigateTomyinfo(){
				uni.navigateTo({
					url:'../myinfo/myinfo'
				});
			}
		},
		computed:{
			showtrendsText(){
				// const that=this;
				 return (index)=>{
					 if(this.isShowall[index] || this.trendstexts[index].text.length<=80)
					 {
						 // this.$set(this.isShowall,index,true);
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.trendstexts[index].text;
					 }else{
						 return this.trendstexts[index].text.substr(0,79)+'...'
					 }
				 }
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 min-height: 100%;
		 .pagetop{
			 width: 100%;
			 height:350rpx;
			 filter:blur(3rpx);
		 }
		 .userinfo{
			 width: 680rpx;
			 height: auto;
			 padding-bottom: 50rpx;
			 margin: auto;
			 margin-top: -80rpx;
			 .userimg{width: 100%;display: flex;justify-content: space-between;height: 180rpx;}
			 .eidtinfo{
				 font-size: 28rpx;
				 color: #888888;
				 text{margin-left: 10rpx;}
				 margin-top: 110rpx;
			 }
			 .username{
				 width: 100%;
				 font-size: 40rpx;
			 }
			 .userfriends{
				 margin-top: 30rpx;
				 display: flex;
				 width: 100%;
				 view{font-size: 30rpx;color: #222;}
				 .userfs{margin-left: 30rpx;}
			 }
		 }
		 .line{width: 100%;height: 15rpx;background-color: #F4F8FB;}
		 .trendscollect{
			 width:680rpx;
			 height: auto;
			 margin: auto;
			 swiper{
				 width: 100%;
			 }
			 .trendslist{
				 width: 100%;
				 height: auto;
			 }
		 }
		 .ringtrends{
		 	width: 690upx;
		 	height: auto;
		 	margin: auto;
		 	padding-bottom: 30upx;
		 	border-bottom: 1upx solid rgba(227, 227, 227, 1);
		 	padding-top: 30upx;
		 	.publisher{
		 		width: 100%;
		 		display: flex;
		 		align-items: center;
				justify-content: space-between;
		 		text{margin-left: 20upx;font-size: 30upx;}
				.publisher-left{
					display: flex;
					align-items: center;
				}
		 	}
		 	.trendstext{
		 		font-size: 28upx;
		 		word-break: break-all;
		 		margin-top: 30upx;
		 	}
		 	.showall{color: #2979FF;}
		 	.trendsimages{width: 100%;height:auto;margin-top: 30upx;display: flex;flex-wrap: wrap;justify-content: space-between;}
		 	.oneimg image{
		 		width: 280upx;
		 		height: 500upx;
		 	}
		 	.twoimg image{
		 		width: 335upx;
		 		height: 250upx;
		 	}
		 	.moreimg image{
		 		width: 220upx;
		 		height: 235upx;
		 	}
		    .trendsbtns{
		 		width: 100%;
		 	    margin-top: 30upx;
		 		display: flex;
		 		align-items: center;
		 	}
		 	.btnitem{
		 		margin-left: 30upx;
		 		display: flex;
		 		align-items: center;
		 		text{margin-left: 10upx;color: rgba(136, 136, 136, 1);}
		 	}
		 	.firstbtn{
		 		margin-left: 0upx;
		 	}
		 }
		 .lasttrends{
		 	border: none;
		 }
		 .deltrend{
		 	width: 100%;
		 	height: 60rpx;
		 	display: flex;
		 	justify-content: flex-end;
		 	margin-top: -30rpx;
		 }
		 .deltrend-qipao{
		    background: url('/static/qipao.png') no-repeat;
		 	width: 180rpx;
		 	height: 60rpx;
		 	display: flex;
		 	align-items: center;
		 	justify-content: center;
		 	font-size: 28rpx;
		 	color: #FFFFFF;
		 	background-size: 100% 100%;
		 	margin-right: 10rpx;
		 }
	 }
</style>
